<template>
	<div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div class="search-s page-public-s" style="box-sizing: border-box">
				<el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="queryForm" :inline="true">
						<!-- <el-form-item label="岗位名称：">
                            <el-input v-model="transferVal" placeholder="请输入岗位名称" />
                        </el-form-item>
                        <el-form-item prop="posId" label="岗位：">
                            <el-select v-model="transferVal1" class="m-2" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item> -->
						<el-form-item>
							<el-button v-if="$hasPer('referenceCard1:add')" @click="addNodeClick" icon="ele-Plus" type="primary"> 新增 </el-button>
							<el-button v-if="$hasPer('referenceCard4:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="岗位名称" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="posName" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.posName }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="事故类别" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="accidentCategory" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.accidentCategory }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="危险因素" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="hazardFactors" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.hazardFactors }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="emergencyMeasures" label="应急措施" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="reportPhoneNumber" label="报告电话" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdTime" label="创建时间" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdUserName" label="创建人" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="updatedUserName" label="更新人" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedUserName">{{ scope.row.updatedUserName }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column min-width="180" label="操作" align="center" fixed="right">
											<el-table-column min-width="180" align="center" fixed="right">
												<template #header>
													<el-button @click="searchClick" icon="ele-Search" type="primary" text> 查询 </el-button>
													<el-button @click="resetClick" icon="ele-Refresh" class="clear-bg" text> 重置 </el-button>
												</template>
												<template #default="scope">
													<div class="operate-s">
														<el-button @click="queryClick(scope.row)" class="icon-e" icon="ele-View" size="small" text type="success"> 详情 </el-button>
														<el-button v-if="$hasPer('referenceCard2:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 编辑 </el-button>
														<el-button v-if="$hasPer('referenceCard3:delete')" @click="deleteHandle(scope.row.n_Id)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
													</div>
												</template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 新增and编辑 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDialogVisible" :title="saveId ? '编辑' : '新增'" width="50%" @close="cancelUseClick">
			<el-form label-width="120px" ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="posId" label="岗位">
							<el-select v-model="ruleForm.posId" class="m-2" placeholder="请选择" style="width: 100%">
								<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="AccidentCategory" label="事故类别">
							<el-input v-model="ruleForm.AccidentCategory" placeholder="事故类别" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="HazardFactors" label="危险危害因素">
							<el-input type="textarea" v-model="ruleForm.HazardFactors" placeholder="危险危害因素" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="EmergencyMeasures" label="应急处置措施">
							<el-input type="textarea" v-model="ruleForm.EmergencyMeasures" placeholder="应急处置措施" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item prop="ReportPhoneNumber" label="报告电话">
							<el-input type="textarea" v-model="ruleForm.ReportPhoneNumber" placeholder="报告电话" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item prop="" label="警示标志(最多六张)">
							<!-- <el-input v-model="" placeholder="警示标志(最多六张)" clearable /> -->
							<div v-if="!saveId">
								<el-upload
									action="#"
									ref="refFile"
									list-type="picture-card"
									:auto-upload="false"
									:file-list="fileList"
									:on-change="handleChange"
									multiple
									class="upload-s"
									limit="6"
									style="overflow: hidden"
								>
									<el-icon>
										<Plus />
									</el-icon>
									<template #file="{ file }">
										<span class="file-s">{{ file.name }}</span>
										<span class="el-upload-list__item-actions set-bg" style="background-color: rgba(0, 0, 0, 0.5) !important">
											<span class="el-upload-list__item-delete" @click="handleRemove(file)" style="background: rgba(0, 0, 0, 0) !important">
												<el-icon>
													<Delete />
												</el-icon>
											</span>
										</span>
									</template>
								</el-upload>
							</div>
							<div v-else style="width: 100%; height: 100%">
								<template v-for="item in fileList" :key="item.url">
									<img style="width: 90px; height: 90px; margin: 0 4px" :src="item.url" alt="已上传图片" />
								</template>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlUseClick">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 详情 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="dialogVisible" title="详情" width="50%" @close="dialogVisible = false">
			<div style="width: 100%; height: 100%; text-align: center">
				<h2>中国振华电子集团新天动力有限公司</h2>
				<h2>岗位安全告知卡</h2>
				<table border="1" width="100%">
					<tr>
						<td class="cell-item">岗位名称</td>
						<td>{{ descriptionsData.posName }}</td>
						<td class="cell-item">事故类别</td>
						<td>{{ descriptionsData.accidentCategory }}</td>
					</tr>
					<tr>
						<td class="cell-item" colspan="1">危险因素</td>
						<td colspan="3">
							<el-input disabled type="textarea" autosize v-model="descriptionsData.hazardFactors"> </el-input>
						</td>
					</tr>
					<tr>
						<td class="cell-item" colspan="1">应急措施</td>
						<td colspan="3">
							<el-input disabled type="textarea" autosize v-model="descriptionsData.emergencyMeasures"></el-input>
						</td>
					</tr>
					<tr>
						<td class="cell-item" colspan="1">警示标志</td>
						<td colspan="3">
							<template v-for="item in imageList" :key="item.url">
								<img style="width: 90px; height: 90px; margin: 0 4px" :src="item.url" alt="已上传图片" />
							</template>
						</td>
					</tr>
					<tr>
						<td class="cell-item" colspan="1">报告电话</td>
						<td colspan="3">{{ descriptionsData.reportPhoneNumber }}</td>
					</tr>
				</table>
			</div>

			<el-divider content-position="left"> 警示标志预览下载 </el-divider>
			<el-table :data="descriptionsData.v_FilePath" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" align="center" />
				<el-table-column prop="createdUserName" label="创建人" align="center" />
				<el-table-column prop="createdTime" label="创建时间" align="center" />
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button @click="viewClick(scope.row)" class="icon-e" text type="success">预览</el-button>
						<el-button @click="downClick(scope.row)" class="icon-e" text type="warning">下载</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import { getJobCardApi, deleteJobCardApi, getJobCardDetailApi, addJobCardApi, editJobCardApi, getPostDetailApiV2 } from '/@/api/sms/HazardousChemicalsInterface';
import { ElMessage, ElMessageBox } from 'element-plus';
import SearchModel from '/@/views/sms/component/search-model.vue';
import { sysFileInfoPreviewBase64 } from '/@/api/centerControl/pubilc';
import { exportToExcel } from '/@/utils/exportToExcel';
import { sysFileInfoMultipleUpload } from '/@/api/sms/sms';
/***** 查询 *****/
let searchObj: any = reactive({});
const transferVal = ref();
const transferVal1 = ref();
const searchClick = () => {
	// searchObj.PosName = transferVal.value
	// searchObj.PosId = transferVal1.value
	let newObj = Object.keys(searInfo.value);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = searInfo.value[i];
		});
	}
};
const resetClick = () => {
	// transferVal.value = ''
	// transferVal1.value = ''
	searInfo.value = {};
	let newObj = Object.keys(searchObj);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = '';
			// console.log(i);
		});
	}
	initInfoFun();
};

/***** 新增 *****/
const showDialogVisible = ref(false);
const ruleForm: any = reactive({
	posId: '', //岗位id
	AccidentCategory: '', //事故类别
	HazardFactors: '', //危险因素
	EmergencyMeasures: '', //应急措施
	ReportPhoneNumber: '', //报告电话
	WarningImages: [], //警示图标
});
const addNodeClick = async () => {
	showDialogVisible.value = true;
};

/***** 编辑 *****/
const saveId = ref();
const nodeClick = async (row: any) => {
	if (row.n_Id) {
		saveId.value = row.n_Id;

		ruleForm.posId = row.posId; //岗位id
		ruleForm.AccidentCategory = row.accidentCategory; //事故类别
		ruleForm.HazardFactors = row.hazardFactors; //危险因素
		ruleForm.EmergencyMeasures = row.emergencyMeasures; //应急措施
		ruleForm.ReportPhoneNumber = row.reportPhoneNumber; //报告电话

		row.v_FilePath.forEach((item) => {
			sysFileInfoPreviewBase64({ Id: item.id })
				.then((res) => {
					fileList.value.push({
						url: res.data,
					});
				})
				.catch((err) => {
					console.log(err);
				});
			// fileList.value.push({
			// 	url: window.location.origin + '/' + item.path,
			// 	name: item.id,
			// });
		});

		console.log(fileList.value);
	}
	showDialogVisible.value = true;
};

/*** 详情 */
const dialogVisible = ref(false);
const descriptionsData: any = ref();
const imageList = ref([])
const queryClick = async (row: any) => {
	descriptionsData.value = null;
	const res = await getJobCardDetailApi({ id: row.n_Id });
	descriptionsData.value = res.data;

	imageList.value = []
	res.data.v_FilePath.forEach((item) => {
		sysFileInfoPreviewBase64({ Id: item.id }).then((res) => {
			imageList.value.push({
				url: res.data,
			});
		});
	});

	dialogVisible.value = true;
};

/*** 删除 */
const deleteHandle = async (val: String | Number) => {
	ElMessageBox.confirm('请确定删除此条数据', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let param = { id: val };
			try {
				let res: any = await deleteJobCardApi(param);
				if (res.success) {
					getData();
				}
			} catch (err) {
				return;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败',
			});
		});
};

/***** 新增表单校验和事件 *****/
const ruleFormRef = ref();
const rules = reactive({
	PosId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	AccidentCategory: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	HazardFactors: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	EmergencyMeasures: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	ReportPhoneNumber: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
});
const cancelUseClick = () => {
	showDialogVisible.value = false;

	saveId.value = '';

	ruleForm.posId = ''; //岗位id
	ruleForm.AccidentCategory = ''; //事故类别
	ruleForm.HazardFactors = ''; //危险因素
	ruleForm.EmergencyMeasures = ''; //应急措施
	ruleForm.ReportPhoneNumber = ''; //报告电话
	ruleForm.WarningImages = []; //警示图标
	refFile.value?.handleRemove(fileList.value || []);
	fileList.value = [];
};
const controlUseClick = async () => {
	const { posId, AccidentCategory, HazardFactors, EmergencyMeasures, ReportPhoneNumber } = ruleForm;
	if (posId && AccidentCategory && HazardFactors && EmergencyMeasures && ReportPhoneNumber) {
		if (saveId.value) {
			await editJobCardApi({ ...ruleForm, id: saveId.value });
			cancelUseClick();
			getData();
		} else {
			fileList.value.length &&
				fileList.value.forEach((item: any) => {
					ruleForm.WarningImages.push(item.raw);
				});
			const res = await addJobCardApi(ruleForm);
			await sysFileInfoMultipleUpload({ files: ruleForm.WarningImages, sourceType: 10, sourceId: res.data });

			await getData();

			setTimeout(() => {
				cancelUseClick();
			}, 500);
		}
	} else {
		ElMessage.warning('内容不能为空');
	}
};

// 图片上传
const fileList: any = ref([]);
const refFile = ref();
const handleChange = (file: any) => {
	fileList.value.push(file);
	console.log(fileList.value);
};
const handleRemove = (file: any) => {
	fileList.value.map((itm: any, inx: number) => {
		if (file.uid === itm.uid) {
			fileList.value.splice(inx, 1);
		}
	});
	refFile.value.handleRemove(file);
};

/*** 初始化数据 */
const basicsInfo: any = ref([]);
const initInfoFun = () => {
	basicsInfo.value = [
		{
			typeId: 'posName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'PosId', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '岗位名称', // placeholder数据
			defaultProp: options1.value, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'accidentCategory', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'AccidentCategory', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '事故类别', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'hazardFactors', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'HazardFactors', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '危险因素', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
	];
};

const searInfo: any = ref();
const searchHandel = (val: any) => {
	searInfo.value = val;
};

/*** viewClick 文件预览 */
const viewClick = async (val: any) => {
	const res = await sysFileInfoPreviewBase64({ Id: val.id });
	const base64ImageData = res.data;
	const previewWindow = window.open('', '_blank');
	if (previewWindow) {
		// previewWindow.location.href = base64ImageData;
		previewWindow.document.write(`<image src=${base64ImageData} alt="图片描述" />`);
	} else {
		// 如果新窗口被阻止（如浏览器拦截或用户禁止），可以提示用户或进行其他处理
		console.warn('未能打开新窗口预览图片，请检查是否阻止了弹窗。');
	}
};
/*** downClick 下载文件 */
const downClick = async (val: any) => {
	let getFile = getFileFun(val.id);
	// 等待getFileFun完成
	await getFile;
	if (getFile && getFile.then) {
		getFile.then((res) => {
			let base64Data = res;
			let blob = base64ToBlob(base64Data);

			// 创建可下载的链接
			let url = URL.createObjectURL(blob);
			let link = document.createElement('a');
			link.href = url;
			link.download = val.fileOriginName; // 指定下载的文件名

			// 将链接添加到DOM中
			document.body.appendChild(link);

			// 触发点击事件开始下载
			link.click();

			// 释放临时URL
			URL.revokeObjectURL(url);
		});
	}
};
/*** getFileFun 获取文件数据 */
const getFileFun = async (val: Number) => {
	let param: any = {};
	param.id = val;
	let res: any = await sysFileInfoPreviewBase64(param);
	console.log(res, 'res');
	if (res.success) {
		return res.data;
	}
};
// 将Base64编码数据转换为Blob对象的辅助函数
const base64ToBlob = (base64Data: any) => {
	var byteString = atob(base64Data.split(',')[1]); // 提取Base64编码的数据部分
	var mimeString = base64Data.split(':')[1].split(';')[0]; // 提取MIME类型
	var ab = new ArrayBuffer(byteString.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ab], { type: mimeString });
};

/*** ================================= 导出数据函数操作 ================================= */
const excelRef: any = ref(null);
const handleExport = () => {
	if (excelRef.value) {
		if (excelRef.value.data.length !== 0) {
			let tableExcel: any = [];
			let tableArr = excelRef.value.data;
			tableArr.map((item: any) => {
				let tableObj: any = {};
				tableObj['岗位名称'] = item.posName ? item.posName : '-';
				tableObj['事故类别'] = item.accidentCategory ? item.accidentCategory : '-';
				tableObj['危险因素'] = item.hazardFactors ? item.hazardFactors : '-';
				tableObj['应急措施'] = item.emergencyMeasures ? item.emergencyMeasures : '-';
				tableObj['报告电话'] = item.reportPhoneNumber ? item.reportPhoneNumber : '-';

				tableObj['创建人'] = item.createdUserName ? item.createdUserName : '-';
				tableObj['创建时间'] = item.createdTime ? item.createdTime : '-';
				tableObj['更新人'] = item.updatedUserName ? item.updatedUserName : '-';
				tableObj['更新时间'] = item.updatedTime ? item.updatedTime : '-';
				tableExcel.push(tableObj);
			});
			exportToExcel(tableExcel, '应知卡.xlsx');
		} else {
			ElMessage({
				type: 'error',
				message: '暂无数据导出',
			});
		}
	}
};

const { handleCurrentChange, pageSize, pageNo, handleSizeChange, totalRows, list, indexMethod, loading, getData } = getTableData(getJobCardApi, {}, searchObj);

const options1: any = ref([]);
onMounted(async () => {
	const res = await getPostDetailApiV2();
	res.data.forEach((element: any) => {
		options1.value.push({
			label: element.name,
			value: element.id,
		});
	});
	await initInfoFun();
});
</script>

<style lang="scss">
@import '../style/public.scss';
</style>

<style scoped lang="scss">
#friend-merchant-manage {
	:deep(.el-upload--picture-card) {
		--el-upload-picture-card-size: 90px;
		background-color: #cccccc56;
		margin-bottom: 2px;
	}

	:deep(.el-upload-list__item) {
		width: 90px;
		height: 90px;
	}

	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}

	:deep(.el-card__body) {
		height: 100%;
	}

	:deep(.el-card) {
		border: none !important;
	}

	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}

	.cardBox {
		margin: 6px;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;

		.cardOne {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ccc;
			width: 100%;
			height: 40px;

			li {
				display: flex;
				align-items: center;

				&:nth-child(1) {
					display: flex;
					width: 50%;

					span {
						padding: 0 4px;
						width: 70px;
					}

					p {
						flex: 1;
					}
				}

				&:nth-child(2) {
					display: flex;
					width: 50%;

					span {
						padding: 0 4px;
						width: 70px;
					}

					p {
						flex: 1;
					}
				}
			}
		}

		.cardTwo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ccc;
			width: 100%;
			height: 200px;

			li {
				display: flex;
				align-items: center;

				&:nth-child(1) {
					display: flex;
					width: 50%;

					span {
						padding: 0 4px;
						width: 70px;
					}

					p {
						flex: 1;
					}
				}

				&:nth-child(2) {
					display: flex;
					width: 50%;

					span {
						padding: 0 4px;
						width: 70px;
					}

					p {
						flex: 1;
					}
				}
			}
		}

		.cardThree {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #ccc;
			width: 100%;
			height: 100px;

			p {
				&:nth-child(1) {
					padding: 0 4px;
					width: 70px;
				}

				&:nth-child(2) {
					flex: 1;
					text-align: center;

					.upload-s {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.cardFour {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 40px;

			p {
				&:nth-child(1) {
					padding: 0 4px;
					width: 70px;
				}

				&:nth-child(2) {
					flex: 1;
					text-align: center;
				}
			}
		}
	}

	table {
		td {
			height: 30px;
			line-height: 30px;
		}
		.cell-item {
			width: 120px;
		}
	}
}
</style>
